import React, { Component } from "react";
let { Provider, Consumer } = React.createContext();
class Count extends Component {
  render() {
    return <Consumer>{({ num }) => <span>{num}</span>}</Consumer>;
  }
}
// class ButtonAdd extends Component {
//   render() {
//     return (
//       <Consumer>
//         {({ handleAdd }) => (
//           <button
//             onClick={() => {
//               handleAdd();
//             }}
//           >
//             +
//           </button>
//         )}
//       </Consumer>
//     );
//   }
// }
// class ButtonSub extends Component {
//   render() {
//     return (
//       <Consumer>
//         {({ handleSub }) => (
//           <button
//             onClick={() => {
//               handleSub();
//             }}
//           >
//             -
//           </button>
//         )}
//       </Consumer>
//     );
//   }
// }
const ButtonCounter = (props) => {
  let { type } = props;
  return (
    <Consumer>
      {({ handleSub, handleAdd }) => (
        <button
          onClick={() => {
            type === "add" ? handleAdd() : handleSub();
          }}
        >
          {type === "add" ? "+" : "-"}
        </button>
      )}
    </Consumer>
  );
};
class App extends Component {
  state = {
    num: 777,
  };
  handleAdd = (params) => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  handleSub = (params) => {
    this.setState({
      num: this.state.num - 1,
    });
  };
  render() {
    return (
      <Provider
        value={{
          num: this.state.num,
          handleAdd: this.handleAdd,
          handleSub: this.handleSub,
        }}
      >
        <ButtonCounter type="add"></ButtonCounter>
        <Count></Count>
        <ButtonCounter type="sub"></ButtonCounter>
      </Provider>
    );
  }
}

export default App;
